<template>
  <!-- 企业帮扶 -->
  <div class="layout">
    <!-- 帮扶案例公示 -->
    <div class="success-example">
      <div class="title">
        企业招聘
        <div class="help-btn" @click="applyTo"></div>
      </div>
			<div class="success-list">
        <div v-for="(item,i) in supportCaseList" :key="i" class="success-item">
          <div class="left">
            <div class="name ellipsistwo">{{item.companyName}}</div>
            <div class="tip">{{item.post}} {{item.amount}}人</div>
          </div>
          <img src="@/assets/image/help/full.png">
        </div>
      </div>
		</div>
    <!-- 人才推荐模块 -->
    <talentShowBar/>
    
    <div class="module">
      <div id="selectTypeDiv">
        <div
          :class="selectTypeIndex == 1 ? 'selectType btn' : 'btn'"
          @click="selectTypeIndex = 1">求职诉求</div>
        <div
          :class="selectTypeIndex == 2 ? 'selectType btn' : 'btn'"
          @click="selectTypeIndex = 2">务工人员</div>
        <div
          class="more"
          @click="typeMore()">更多+</div>
      </div>
      <!-- 求职诉求 -->
      <div class="companyListDiv" v-if="selectTypeIndex == 1">
        <laborDemand
          v-for="(laborDemand, index) in helpAppealList"
          :key="index"
          :laborDemand="laborDemand"
          style="margin-bottom: 20px"/>
        <div class="virtualDom" v-show="helpAppealList.length % 3 == 2"></div>
      </div>
      <!-- 务工人员 -->
      <div class="companyListDiv" v-if="selectTypeIndex == 2">
        <migrantWorker
          v-for="(migrantWorker, index) in migrantWorkerList"
          :migrantWorker="migrantWorker"
          :key="index"
          style="margin-bottom: 20px"/>
        <div class="virtualDom" v-show="migrantWorkerList.length % 3 == 2"></div>
      </div>
    </div>
    <!-- 人才推荐区域 -->
    <!-- <div class="talentTitleDiv">
      <div class="titleDiv" style="width: 100%">
        <div>人才推荐</div>
        <div
          class="more"
          style="font-size: 12px; color: #333333; font-weight: normal"
          @click="$router.push({ path: 'talentRecommendList' })">更多+</div>
      </div>
    </div>
    <div class="talentListDiv">
      <talentRecommend/>
    </div> -->
  </div>
</template>

<script>
import CompanyFrame from "./components/companyFrame";
import laborDemand from "./components/laborDemand";
import talentRecommend from "./components/talentRecommend";
import migrantWorker from "./components/migrantWorker";
import talentShowBar from "./components/talentShowBar";
// api
import { request } from "@/utils/request.js";
import config from "@/utils/config.js";
import {checkLogin,relogin} from '@/utils/util.js'

import { getHelpCaseList, getHelpAppealList, getMigrantWorkerList } from '@/common/api/help'

export default {
  name: "help",
  components: {
    CompanyFrame,
    laborDemand,
    migrantWorker,
    talentRecommend,
    talentShowBar,
  },
  data() {
    return {
      selectTypeIndex: 1,
      supportCaseList: [], //企业帮扶案例成功列表（8条）
      helpAppealList: [], //劳务诉求列表
      migrantWorkerList: [], //务工人员列表
    };
  },
  mounted(){
  	this.getHelpCaseList();
  	this.getHelpAppealList();
  	this.getMigrantWorkerList();
  },
  // activated() {
  //   this.getHelpCaseList();
  //   this.getHelpAppealList();
  //   this.getMigrantWorkerList();
  // },
  methods: {
    // 申请帮扶（登录后）
    applyTo(){
      if(checkLogin(this)){
				this.$CheckRole('发布招聘', () => {
					this.$router.push({name: 'companyRequirementEdit'})
				})
      }else{
        relogin(this);
      }
    },
    // 获取企业招聘列表
    async getHelpCaseList() {
      let data = {
        pageNum: 1,
        pageSize: 4,
      };
      const { code, msg, rows } = await getHelpCaseList(data)
      console.log('msg', rows)
      if (code != "200") return this.$message.warning(msg);
      this.supportCaseList = rows;
    },
    // 求职诉求列表
    async getHelpAppealList() {
      let data = {
        pageNum: 1,
        pageSize: 12,
      };
      const { code, msg, rows } = await getHelpAppealList(data);
      if (code != "200") return this.$message.warning(msg);
      this.helpAppealList = rows;
    },
    // 获取务工人员列表
    async getMigrantWorkerList() {
      let data = {
        pageNum: 1,
        pageSize: 12,
      };
      const { code, msg, rows } = await getMigrantWorkerList(data)
      if (code != "200") return this.$message.warning(msg);
      this.migrantWorkerList = rows;
    },
    /**
     * 点击
     */
    typeMore () {
      // if (this.selectTypeIndex == 0) {
      //   this.$router.push({ path: "helpCaseList" });
      if (this.selectTypeIndex == 1) {
        this.$router.push({ path: "/help/helpAppealList" });
      } else if (this.selectTypeIndex == 2) {
        this.$router.push({ path: "/help/helpHumanList" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.success-example {
  width: 100%;
  height: 265px;
  background: url('../../assets/image/help/bg1.png');

  .title {
    width: 1200px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
    position: relative;
    font-size: 28px;
		letter-spacing: 5px;
    color: #045db9;
    font-weight: bold;
    box-sizing: border-box;
    .help-btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: url('../../assets/image/help/btn.png');
      background-size: 210px 68px;
      width: 210px;
      height: 68px;
      cursor: pointer;
    }
  }
  .success-list {
    width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .success-item {
      display: flex;
      justify-content: space-between;
      width: 285px;
      height: 110px;
      border-top: 4px solid #045db9;
      background: #ffffff;
      padding: 20px 15px;
      .left {
        .name {
          font-size: 18px;
          font-weight: bold;
          color: #045db9;
          margin-bottom: 10px;
          min-height: 48px;
        }
        .tip {
          font-size: 14px;
          color: #333;
          text-align: left;
        }
      }
      img {
        width: 48px;
        height: 48px;
        object-fit: cover;
      }
    }
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.topBar {
  width: 100%;
  height: 169px;
  background-image: url("~@/assets/image/help/topBarBg.png");
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}

.topBar .topMsg {
  width: 1000px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  color: #ffffff;
}

.module {
  background: url('../../assets/image/help/bg3.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 535px;
  padding-top: 30px;
}

#selectTypeDiv {
  width: 1200px;
  margin: 0 auto 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .btn {
    padding: 8px 0;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
    margin: 0 32px;
    letter-spacing: 4px;
    &:hover {
      border-bottom: 4px solid #045db9;
      color: #045db9;
      cursor: pointer;
    }
    &.selectType {
      border-bottom: 4px solid #045db9;
      color: #045db9;
    }
  }
  .more {
    position: absolute;
    right: 0;
    font-size: 15px;
  }
}

.more:hover {
  cursor: pointer;
  text-decoration: underline;
}

.companyListDiv {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
  // padding: 20px 0;
}

.companyListBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.companyListBox .virtualDom,
.companyListDiv .virtualDom {
  width: 310px;
  height: 172px;
}

.companyListDiv .companyDiv {
  width: 310px;
}

.talentTitleDiv .titleDiv {
  color: #045db9;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid #045db9;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
/* 人才区域样式 */
.talentTitleDiv {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}
.talentListDiv {
  width: 1000px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  box-sizing: border-box;
}
</style>
